<style>
.box3{
	width: 298px;
	height:431px;
	margin-top: 15px;
	box-shadow: 10px 10px 5px #black;
}
.box3 .antiscroll-inner {
	width: 306px;
	height:431px;
}
.antiscroll-wrap-inst {
	overflow: hidden;
	position: relative;
	display: inline-block !important;
}
</style>
<div class="antiscroll-wrap-inst">
<div class="box3">
<div class="gcb-nav antiscroll-inner" id="gcb-nav-y" role="navigation">
<div class="box-inner">
  <ul class="lesson-nav">
    {{course_info.unit.after_leftnav_begins | safe}}

    {% for lesson in lessons %}
    
    {% if lesson.now_available or is_course_admin %}
	    <li {% if page_type == 'unit' and lesson.lesson_id == lesson_id %}class="active"{% endif %}>
        {% if is_progress_recorded %}
        
            <div class="gcb-progress-icon-holder">
            {% if lesson.lesson_id in lesson_progress and lesson_progress[lesson.lesson_id]['html'] == 2 %}
                <img src="assets/lib/completed.png"
                         alt="{# I18N: Alt text for image representing student progress. #}{{ gettext('Completed') }}"
                         title="{# I18N: Alt text for image representing student progress. #}{{ gettext('Completed') }}"
                         class="gcb-progress-icon"
                         id="progress-completed-{{lesson.lesson_id}}">
            {% elif lesson.lesson_id in lesson_progress and lesson_progress[lesson.lesson_id]['html'] == 1 %}
                <img src="assets/lib/in_progress.png"
                         alt="{# I18N: Alt text for image representing student progress. #}{{ gettext('In progress') }}"
                         title="{# I18N: Alt text for image representing student progress. #}{{ gettext('In progress') }}"
                         class="gcb-progress-icon"
                         id="progress-inprogress-{{lesson.lesson_id}}">
            {% else %} <img src="assets/lib/not_started.png"
                         alt="{# I18N: Alt text for image representing student progress. #}{{ gettext('Not yet started') }}"
                         title="{# I18N: Alt text for image representing student progress. #}{{ gettext('Not yet started') }}"
                         class="gcb-progress-icon"
                         id="progress-notstarted-{{lesson.lesson_id}}">
            {% endif %}
            </div>
        {% endif %}

        <div class="gcb-lesson-title-with-progress">
        
        {% if page_type == 'unit' and lesson.lesson_id == lesson_id %}
            {{ unit.index }}.{{ lesson.index }} {{ lesson.title }}
        {% else %}
            <a href="unit?unit={{ unit_id }}&lesson={{ lesson.lesson_id }}" title="{{ lesson.title }}"> {{ unit.index }}.{{ lesson.index }} {{ lesson.title }} </a>
        {% endif %}
    
	    </div>
        {% if not lesson.now_available and is_course_admin %}
            <span class="gcb-grayed"> (Private) </span>
        {% endif %}
    </li>
    {% else %}
        <li>
        {% if page_type == 'unit' and lesson.lesson_id == lesson_id %}
            <span class="gcb-grayed-active">
        {% else %}
            <span class="gcb-grayed">
        {% endif %}
    
        {{ unit.index}}.{{ lesson.index }} {{ lesson.title }} </span>
        
        {% if lesson.activity %}
            <ul>
                <li>
                    <span class="gcb-progress-empty"></span>
    
            {% if page_type == 'activity' and lesson.lesson_id == lesson_id %}
                <span class="gcb-grayed-active">
            {% else %}
                <span class="gcb-grayed">
            {% endif %}
                  
            {# I18N: Menu item. #}
            {{ gettext('Activity') }} </span>
                </li>
            </ul>
        {% endif %}
    
	    </li>
    {% endif %}
    
{% endfor %}
    
	{{course_info.unit.before_leftnav_ends | safe}}

	</ul>
</div>
</div>
</div>
</div>
<script>
$(function() {
	$(".antiscroll-wrap-inst").antiscroll();
});
</script>